<template>
    <div>
        <el-tabs type="card" v-model="activeName"  @tab-click="handleClick" style="width: 140px">
            <el-tab-pane label="多选" name="first">
                <div>
                    <p>过滤条件</p>
                    <multiple-component :table-id="tableId" :selected-value="selectedValue" @selectValue="getSelectValue"  ref="mulSelect"></multiple-component>
                </div>
            </el-tab-pane>
            <el-tab-pane label="单选" name="second">
                <div>
                    <p>过滤条件</p>
                    <radio-component :table-id="tableId" :selected-value="selectedValue.toString()" @selectValue="getSelectValue"  ref="radSelect"></radio-component>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import multipleComponent from './TextMultipleComponent'
    import radioComponent from './TextRadioComponent'

    export default {
        components: {
            multipleComponent,
            radioComponent
        },
        props: {
            tableId: {
                type: String,
                default () {
                    return ''
                }
            },
            field: {
                type: Array,
                default () {
                    return []
                }
            },
            selectedValue: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        data () {
            return {
                activeName: 'second',
                fieldValue: []

            }
        },
        watch: {},
        methods: {
            // 其他页面调用的时候获取数据
            getData (data) {
                this.fieldValue = []
                data.forEach(e => {
                 this.fieldValue.push(e.columnName)
                  })
                if (this.activeName === 'first') {
                    this.$refs.mulSelect.getData(this.fieldValue)
                }
                if (this.activeName === 'second') {
                    this.$refs.radSelect.getData(this.fieldValue)
                }
            },
            // 单选/多选的切换
            handleClick (tab, event) {
                if (tab.name === 'first') {
                    this.$refs.mulSelect.getData(this.fieldValue)
                }
                if (tab.name === 'second') {
                    this.$refs.radSelect.getData(this.fieldValue)
                }
            },
            // 获取选中的值
            getSelectValue (data) {
                let select = {}
                select.tab = this.activeName
                select.data = data
                this.$emit('getSelect', select)
            }

        },
        mounted () {

        }
    }
</script>

<style scoped>

</style>
